<template>
  <div class="dashboard-editor-container">
    <div class="container">
      <div>
        <!--                                              个人信息卡-->
        <div>
          <el-row>
            <el-col :span="12">
              <el-card class="box-card personalInfo" style="height: 387px">
                <div slot="header" class="clearfix">
                  <span>个人信息</span>
                </div>
                <el-row type="flex" align="middle">
                  <el-col :span="6" tyle="height: 100%;">
                    <div class="text-center">
                      <userAvatar style="height: 100%;"/>
                    </div>
                  </el-col>
                  <el-col :span="18">
                    <ul class="list-group list-group-striped">
                      <li class="list-group-item">
                        <svg-icon icon-class="user"/>
                        用户名称
                        <div class="pull-right">{{ user.userName }}</div>
                      </li>
                      <li class="list-group-item">
                        <svg-icon icon-class="phone"/>
                        手机号码
                        <div class="pull-right">{{ user.phonenumber }}</div>
                      </li>
                      <li class="list-group-item">
                        <svg-icon icon-class="tree"/>
                        所属部门
                        <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
                      </li>
                      <li class="list-group-item">
                        <svg-icon icon-class="peoples"/>
                        所属角色
                        <div class="pull-right">{{ roleGroup }}</div>
                      </li>
                      <li class="list-group-item">
                        <svg-icon icon-class="achieve"/>
                        成就
                        <div class="pull-right" style="overflow-y: auto;white-space: nowrap;width: 80%;text-align: right;">
                          <el-image v-for="item in achieveList" :src="item.path" :title="item.achieveName" style="height: 30px;padding: 5px;"/>
                        </div>
                      </li>
                    </ul>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="box-card">
                <div ref="abilityAnalysisRadarChart" :style="{ height: height, width: width }"/>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-calendar class="custom-calendar" v-model="selectedDate">
            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template slot="dateCell" slot-scope="{date, data}">
              <span style="font-size: 15px;color: grey;">{{ data.day }}</span>
              <div v-for="(item,key) in dailyData" :key="key">
                <div v-if="item.date === data.day" class="calendar_content">
                  <div v-if="item.specialTrainRecord.num">
                    <!--                  ⭐-->
                    训练数量：{{ item.specialTrainRecord.num }}<span class="emoji-container">🙂</span>
                  </div>
                  <div v-if="item.simulationTrainRecord.papers != null">
                    模拟训练<span class="emoji-container">🚩</span>
                  </div>
                  <span v-if="item.examRecord.papers != null">试卷<span class="emoji-container">🔔</span></span>
                  <span v-if="item.examPlanRecord.details.length">考试计划<span class="emoji-container">🔔</span></span>
                </div>
              </div>
            </template>
          </el-calendar>
        </div>
      </div>

      <div>
        <el-row>
          <el-col :span="12">
            <el-card class="box-card">
              <el-row type="flex" justify="center">
                <el-col :span="7">
                  <div class="grid-content bordered-box">考试名称</div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content bordered-box">成绩</div>
                </el-col>
                <el-col :span="7">
                  <div class="grid-content bordered-box">时间</div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content bordered-box">状态</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bordered-box">🚩排名</div>
                </el-col>
              </el-row>
              <ul class="infinite-list" v-infinite-scroll="load"
                  style="max-height: 200px;min-height:200px;overflow: auto;padding-left: 0px;height: 200px;">
                <li v-for="(record, index) in gradeRecord" :index="index" class="infinite-list-item">
                  <el-row type="flex" justify="center" style="padding-bottom: 10px;">
                    <el-col :span="7">
                      <div class="grid-content bordered-box-content" :title="record.name">{{ record.name }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div class="grid-content bordered-box-content">{{
                          record.gainGrade === null ? "-" : record.gainGrade
                        }}
                      </div>
                    </el-col>
                    <el-col :span="7">
                      <div class="grid-content bordered-box-content">{{ record.createTime }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div class="grid-content bordered-box-content"><span
                        :class="record.stateStr === '已完成' ? 'success-status':'failure-status'">{{
                          record.stateStr
                        }}</span></div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bordered-box-content">
                        {{ record.ranking === 0 ? "未排名" : `第${record.ranking}名` }}
                      </div>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <el-row type="flex" justify="center">
                <el-col :span="4">
                  <div class="grid-content bordered-box">岗位</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bordered-box">申请前</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bordered-box">申请后</div>
                </el-col>
                <el-col :span="2">
                  <div class="grid-content bordered-box">审核</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bordered-box">审核意见</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bordered-box">审核时间</div>
                </el-col>
              </el-row>
              <ul class="infinite-list" v-infinite-scroll="postLoad"
                  style="max-height: 200px;min-height:200px;overflow: auto;padding-left: 0px;height: 200px;">
                <li v-for="(record, index) in postRecord" :index="index" class="infinite-list-item">
                  <el-row style="padding-bottom: 10px;">
                    <el-col :span="4">
                      <div class="grid-content bordered-box-content">{{ record.postName }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bordered-box-content">{{
                          record.type === 0
                            ? postLevel[record.oldCode] : postAbility[record.oldCode]
                        }}
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bordered-box-content">{{
                          record.type === 0
                            ? postLevel[record.toCode] : postAbility[record.toCode]
                        }}
                      </div>
                    </el-col>
                    <el-col :span="2">
                      <div
                        :class="['grid-content','bordered-box-content',record.state == options.Post_Apply_State.enums.REJECT.value ? 'failure-status':(record.state == options.Post_Apply_State.enums.PASS.value ? 'success-status' : (record.state == options.Post_Apply_State.enums.WAIT.value ? 'warning-status' : ''))]">
                        {{
                          options.Post_Apply_State.map[record.state]
                        }}
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bordered-box-content">{{ record.remark }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div class="grid-content bordered-box-content">{{ record.updateTime }}</div>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <div ref="TainNumlineChart" :style="{ height: height, width: width }"></div>
      </el-row>
      <div>
        <el-row>
          <el-tabs v-model="activeName">
            <el-tab-pane v-for="(item, index) in postDetails" :key="item.postId" :label="item.postName"
                         :name="item.postId">
              <el-card class="box-card">
                <el-row type="flex" align="middle">
                  <el-col :span="2">
                    <h3>岗位能力</h3>
                  </el-col>
                  <el-col :span="22">
                    <el-steps :active="Number(item.postAbilityCode)" finish-status="success" simple>
                      <el-step v-for="(abilityItem, index) in dict.type.post_ability"
                               :title="abilityItem.label"></el-step>
                    </el-steps>
                  </el-col>
                </el-row>
                <el-row type="flex" align="middle">
                  <el-col :span="2">
                    <h3>岗位级别</h3>
                  </el-col>
                  <el-col :span="22">
                    <el-steps :active="Number(item.postLevelCode)" finish-status="success" simple>
                      <el-step v-for="(levelItem, index) in dict.type.post_level" :title="levelItem.label"></el-step>
                    </el-steps>
                  </el-col>
                </el-row>
                <div>
                  训练进度
                  <div v-for="(progressItem) in specialProgress">
                    {{ progressItem.subjectName }}
                    <el-progress :text-inside="true" :stroke-width="26"
                                 :percentage="progressItem.trainNum / progressItem.num * 100"></el-progress>
                  </div>
                </div>
              </el-card>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script src="./index.js"></script>


<style lang="scss" scoped>

::v-deep .el-calendar-day {
  overflow: auto;
}

.box-card {
  overflow-y: auto;
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.container {
  min-width: 1200px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 10px;
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

ul {
  list-style-type: none;
}

.bordered-box {
  border: 1px solid #d3dce6;
  /* 设置边框样式 */
  border-radius: 4px;
  /* 可选：设置圆角 */
  padding: 10px;
  /* 内边距 */
  box-sizing: border-box;
  /* 确保边框不影响内部内容的宽度 */
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-content {
  // 为了撑起高度,不至于隐藏
  min-height: 1px;
}

.bordered-box-content {
  box-sizing: border-box;
  /* 确保边框不影响内部内容的宽度 */
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar_content {
  //font-size: 15px;
  //line-height: 16px;
  line-height: 25px;
}

span.emoji-container {
  padding: 0 5px;
  display: inline-block;
  //font-size: 10px;
}

::v-deep .el-calendar-table .el-calendar-day {
  height: 115px !important;
}

.success-status {
  color: #67C23A;
}

.warning-status {
  color: #E6A23C;
}

.failure-status {
  color: #F56C6C;
}

.el-divider.el-divider--horizontal {
  margin: 5px 0;
}

.personalInfo::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.pull-right{
  &::-webkit-scrollbar{
    height: 4px;
  }
}

// ::v-deep .custom-calendar .el-calendar-day{
//     width: 100%;
//     height: 70px;
//     text-align: center;
//   }
</style>
